import React,{ Component } from 'react';
import { IndexDetailStyle,DetailPriceStyle,DetailPriceInfoStyle,DetailPriceTimeStyle,DetailTitleStyle,DetailContainerStyle,DetailTabBarStyle,DetailTabBarLeftStyle,DetailTabBarRightStyle,DetailsImgStyle,DetailCountContainerStyle,
DetailsNav } from './IndexDetailStyle';
import HomeCommon from 'pages/home/HomeCommon'
import Banner1 from './banner1'
import BScroll from 'better-scroll'
import {  Badge } from 'antd-mobile';
import { Link } from 'react-router-dom'

import Head from 'components/common/head/Head';



const Item1 = (props) => {
    return   <img src={ props[800] }/>
}

 class IndexDetail extends Component{

    constructor () {
        super()
        this.state = {
            num:1,
            shop:0
          };
    }

    plus = () => {
        
        this.setState({
            num:this.state.num+1
        })
        
    }

    minus = () => {
        if( this.state.num>0){
            this.setState({
                num:this.state.num-1
            })
            
        }
            
    
    }
    buy = () => {
        this.setState({
            shop:this.state.num
        })
        // console.log(this.props.index_detali_price.jumei_price)
        // console.log(this.props.index_detail.name)
        // console.log(this.props.index_detail.image_url_set.single_many[0][800])
        // console.log(this.state.num)
        this.props.addShop({
            shop_name:this.props.index_detail.name,
            shop_price:this.props.index_detali_price.jumei_price,
            shop_img:this.props.index_detail.image_url_set.single_many[0][800],
            shop_num:this.state.num
        })
        
    }

    componentDidMount () {
        this.props.getIndexDetailList( this.props.location.pathname.slice(12))
        this.props.getIndexDetailPrice(this.props.location.pathname.slice(12))
        this.scroll = new BScroll( this.box,{
            mouseWheel: {
                speed: 5,
                invert: false,
                easeTime: 300
               },
               pullUpLoad: {
                threshold: 50 //开启上拉事件
            },
               click: true,
               probeType:2
        })
        // this.props.change_title()
        
       
       
    }
   

    renderItem1 = () => {

        return this.props.index_detail && this.props.index_detail.image_url_set.single_many.map( item => {
          return  <Item1 key={item[800]} {...item}/>
        } )
    }
   
     render () {
         return (
         <IndexDetailStyle >
             <Head {...this.props} title1={ this.props.index_detail && this.props.index_detail.name }/>
         <DetailContainerStyle ref={ el => this.box = el}>   
         <div> 
             {/* 轮播 */}
            <Banner1 index_detail={ this.props.index_detail && this.props.index_detail } />
            {/* 价格 */}
            <DetailPriceStyle>
                <DetailPriceInfoStyle>
                  <div>  <span className="price">￥{ this.props.index_detali_price && this.props.index_detali_price.jumei_price }</span>
                    <s>￥{this.props.index_detali_price && this.props.index_detali_price.market_price}</s> </div>
                    <strong>{ this.props.index_detali_price && this.props.index_detali_price.buyer_number_text }</strong>
                    
                </DetailPriceInfoStyle>

                <DetailPriceTimeStyle>
                <span>还剩1天18:48:21</span>
                </DetailPriceTimeStyle>
            </DetailPriceStyle>
            
            <DetailTitleStyle>
            {/* BEPERFECT 萌宠猪猪可爱款硅胶洁面仪 */}
            {this.props.index_detail && this.props.index_detail.name}
            </DetailTitleStyle>
            <DetailCountContainerStyle>
               购买数量 <button onClick={this.minus}><i className="fa fa-minus"></i></button>
                <span>{ this.state.num }</span>
                <button onClick={ this.plus }><i className="fa fa-plus"></i></button>
            </DetailCountContainerStyle>
            <DetailsNav>
                <div className="tab-box">
                    <ul className="tuwen-tab color6 tac fs13 bd-bottom bgc-f">
                        <li className="pr cur">
                            图文详情<span className="pa"></span>
                        </li> 
                        <li className="pr">
                            商品参数<span className="pa"></span>
                        </li>
                        <li className="pr">
                            评价<span className="pa"></span>
                        </li>
                    </ul>
                </div>
            </DetailsNav>
            
            <DetailsImgStyle>
                    { this.renderItem1() }
                            
            </DetailsImgStyle>
           
        </div>  
        </DetailContainerStyle>  


        {/* 底部 */}
        
       <DetailTabBarStyle>

           <DetailTabBarLeftStyle>

               <Link to="/home">
                    <i className="fa fa-university"></i>
                    <span>店铺</span>
               </Link>

               <Link to="/shop">
                    <i className="fa fa-shopping-bag"></i>
                    <span>购物车</span>
                   <div className="dot"><Badge text={this.state.shop} overflowCount={10} size="small" hot /></div> 
               </Link>

           </DetailTabBarLeftStyle>

           <DetailTabBarRightStyle>
            
               <span onClick={ this.buy }>加入购物车</span> 
               <div>立即购买</div>
           </DetailTabBarRightStyle>

        </DetailTabBarStyle> 
    </IndexDetailStyle>
         )
     }
 }

 export default HomeCommon(IndexDetail)